<template>
  <div class="detail">
    <div class="title">
      <div class="price">
        <span>¥ {{ house.monthRent }}/月</span>
      </div>
      <div class="info">
        <h1>{{ house.title }}</h1>
        <p><i class="el-icon-map-location"></i> {{ house.city + house.area + house.address }}</p>
      </div>
    </div>
    <el-carousel :interval="3000" height="500px" type="card">
      <el-carousel-item v-for="item in imgSAll" :key="item.id">
        <img :src="item.url">
      </el-carousel-item>
    </el-carousel>
    <div class="main">
      <div class="left">
        <div class="descriptions">
          <el-descriptions title="房屋详细信息">
            <el-descriptions-item label="状态">{{ houseStatus }}</el-descriptions-item>
            <el-descriptions-item label="租金">¥{{ house.monthRent }}/月</el-descriptions-item>
            <el-descriptions-item label="押金">¥1000</el-descriptions-item>
            <el-descriptions-item label="租赁方式">{{ house.rentType === 'whole' ? '整租' : '合租' }}</el-descriptions-item>
            <el-descriptions-item label="卧室数量">{{ house.bedroom }}</el-descriptions-item>
            <el-descriptions-item label="客厅数量">{{ house.parlour }}</el-descriptions-item>
            <el-descriptions-item label="卫生间数量">{{ house.toilet }}</el-descriptions-item>
            <el-descriptions-item label="是否有厨房">{{ house.kitchen ? '有厨房' : '没有厨房'}}</el-descriptions-item>
            <el-descriptions-item label="是否有电梯">{{ house.elevator ? '有电梯' : '没有电梯' }}</el-descriptions-item>
            <el-descriptions-item label="房屋面积">{{ house.capacity }} ㎡</el-descriptions-item>
            <el-descriptions-item label="联系人姓名">{{ house.ownerName }}</el-descriptions-item>
            <el-descriptions-item label="联系人手机号">{{ house.ownerPhone }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="desc">
          <h2>详细描述</h2>
          <span>{{ house.content }}</span>
          <span>{{ house.info }}</span>
        </div>
        <div class="gallery">
          <h2>留言反馈</h2>
          <el-input v-model="evaluate.content" placeholder="请留下你的评价" rows="4" style="width: 100%;" type="textarea"></el-input>
          <div>
            <div style="text-align: left;padding-top: 20px">
              请给予评分：<el-rate v-model="evaluate.value" show-text style="padding-top: 10px"></el-rate>
            </div>
            <div style="text-align: right">
              <el-button style="margin-top: 10px" type="primary" @click="evaluateSub">提交</el-button>
            </div>
          </div>
          <div v-if="list.length > 0"  class="comment-list">
            <div>评论列表：(共{{list.length}}条留言)</div>
            <div v-for="(item, index) in list" :key="item.id" class="comment-item">
              <div class="user-info">
                <span class="user-name" style="color: black">{{ item.username }}：</span>
              </div>
              <div class="comment-content">
                <p style="font-weight: normal;color: #20ab6c">{{ item.content }}  <p>他(她)的评价是：<el-rate v-model="item.value" show-text style="padding-top: 10px"></el-rate></p>
                <div class="comment-actions">
                  <span class="comment-time" style="font-weight: unset;color: #f0ad4e">{{ item.createTime }}</span>
                  <div class="action-buttons">
                    <div class="like-container">
                      <el-button
                          :class="{ 'liked': isLiked }"
                          type="text"
                          @click="handleLike(item.id)"
                      >
                        <i class="el-icon-thumb"></i>
                        {{ item.likes || '点赞' }}
                        {{item.liked}}
                      </el-button>
                    </div>
                  </div>
                </div>
                <!-- 回复区域 -->
<!--                <div v-if="item.showReply" class="reply-section">
                  <el-input
                      v-model="item.replyContent"
                      type="textarea"
                      :rows="2"
                      placeholder="请输入回复内容"
                      style="margin-top: 10px;"
                  ></el-input>
                  <div style="text-align: right; margin-top: 10px;">
                    <el-button size="small" @click="cancelReply(index)">取消</el-button>
                    <el-button type="primary" size="small" @click="submitReply(index)">回复</el-button>
                  </div>
                </div>-->

                <!-- 显示已有回复 -->
<!--                <div v-if="item.replies && item.replies.length" class="replies">
                  <div v-for="(reply, rIndex) in item.replies" :key="rIndex" class="reply-item">
                    <div class="reply-content">
                      <span class="reply-author">@{{ reply.author }}：</span>
                      <span class="reply-text">{{ reply.content }}    </span>
                      <span class="reply-time">{{ reply.time }}</span>
                      <el-button
                          type="text"
                          size="mini"
                          style="margin-left: 10px;color: #f56c6c;"
                      >
                        删除
                      </el-button>
                    </div>
                  </div>
                </div>-->
              </div>
            </div>
          </div>
          <div v-else class="no-comment-tip">
            暂无评论，快来发表你的第一条评论吧~
          </div>

        </div>

<!--        <div class="container">
          <h2>地图位置</h2>
          <div class="map" id="map"></div>
        </div>-->

      </div>
      <div class="right" >
        <div class="collect">
          <!-- <el-button @click="collect" plain type="danger" class="btn1" icon="el-icon-star-off">收藏</el-button> -->
          <i :class="[star ? 'el-icon-star-off star ' : 'el-icon-star-off ']" @click="collect"> 收藏</i>
        </div>
        <!-- house.status === 1 表示未租出才显示 -->
        <div class="date" >
          <div class="price">¥ {{ (house.monthRent / 30).toFixed(2) }} /日</div>
          <div class="pick">
<!--            <p>选择日期下单预定，入住时间和退租时间</p>-->
            <p>请选择你预约看房的时间</p>
            <el-date-picker v-model="date"
                            :picker-options="{
                            disabledDate: (time) => {
                            return time.getTime() < Date.now() - 24 * 60 * 60 * 1000; // 禁用今天之前的日期
                            }}"
                            format="yyyy-MM-dd HH:mm"
                            placeholder="预约日期"
                            style="width: 350px"
                            type="datetime"
                            value-format="yyyy-MM-dd HH:mm"
                            >
            </el-date-picker>
            <el-button v-if="house.status ===0" class="btn2" type="primary" @click="reserve(house.id)">预约看房</el-button>

            <el-date-picker v-model="dateRange" :picker-options="pickerOptions" end-placeholder="退租日期" format="yyyy 年 MM 月 dd 日"
                            range-separator="至"  start-placeholder="入住日期"
                            style="margin-top: 20px;border-radius: inherit" type="daterange"
                            value-format="yyyy-MM-dd">
            </el-date-picker>
            <el-button class="btn2" type="primary" @click="timeBtn()">立即预定</el-button>
          </div>
        </div>
        <div class="contact">
          <h2>房东信息</h2>
          <div class="msg">
            <img :src="defaultavatar" alt="" class="imgtx" />
            <h3>联系人：{{ info.ownerName }}</h3>
            <p>手机号码：{{ info.ownerPhone }}</p>
            <p>邮箱：{{info.email}}</p>
            <div>
              <el-button style="color: white;background-color: #20ab6c;width: 150px;font-weight: bold">电话咨询</el-button>
              <el-button style="color: green;background-color: #e7f0f0;width: 150px;font-weight: bold">在线咨询</el-button>
            </div>
          </div>
        </div>

        <div class="container">
          <h2>地图位置</h2>
          <div id="map" class="map"></div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>

import axios from "axios";
import {checkUserInfoComplete} from "@/util/user-info-check";

import AMapLoader from "@amap/amap-jsapi-loader";

const user = JSON.parse(localStorage.getItem('login-user'))

window._AMapSecurityConfig = {
  securityJsCode: 'e2ba8a5fa6754e1f60b36f3b79f2011c'
}


export default {
  name: 'HouseDetail',
  created() {
    if (user!==null){
      this.userInfo = user
    }

  },
  mounted() {
    this.init()

    //获取房屋信息
    this.getHouseInfo()

    this.evaluateGet()

    this.getLocationCoordinates()

    //判断用户是否登录，登录了才判断是否收藏
    if (user!==null){
      this.isStar()
    }
  },
  data() {
    return {
      location:'',
      coordinates: null,
      userInfo:{
        role:''
      },
      map: null,
      lng: 104.043246,
      lat: 30.641849,
      marker: null,
      evaluate:{
        value:0,
        content:'',
        username: '',
        createTime:'',
        liked:false
      },
      monthRent:'',
      value:0,
      texts:['强烈不推荐','不推荐','一般','推荐','强烈推荐'],
      isLiked:false,
      star: false,
      emailForm:{
        name:'',
        phone:'',
        email:'',
        content:''
      },
      form:{
        count:0
      },
      list:[],
      //入住时间
      dateRange:'',
      //预约时间
      date: '',
      //当前时间
      currentDate: new Date(),
      //默认房东头像
      defaultavatar: require('@/assets/user2.jpeg'),
      house:{
        id:'',
        monthRent:'',
        ownerId:'',
        status:'',
        imgUrl: []
      },
      //房屋信息
      imgS: [],
      //日期选择器快捷选项
      pickerOptions: {
        disabledDate: (time) => {
          return time.getTime() < Date.now() - 24 * 60 * 60 * 1000; // 禁用今天之前的日期
        },
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            end.setTime(end.getTime() + 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            end.setTime(end.getTime() + 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            end.setTime(end.getTime() + 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近六个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            end.setTime(end.getTime() + 3600 * 1000 * 24 * 180);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一年',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            end.setTime(end.getTime() + 3600 * 1000 * 24 * 365);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      info:[],
      imgSAll:[],
      count: 0,
      mapLocation:"",
    }
  },
  methods: {

    // 获取房屋信息
    getHouseInfo() {
      const  id = this.$route.params.id
      axios({
        url:"http://localhost:8090/house/getHouse/"+id,
        methods: 'get',
      }).then(res=>{
        if (res.code === '200'){
          this.info = res.data
          this.house = res.data.house

          const imgUrl = this.house.imgUrl;
          try {
            // 尝试解析JSON字符串（兼容数据库存储格式）
            this.imgS = typeof imgUrl === "string" ? JSON.parse(imgUrl) : imgUrl;
          } catch (e) {
            // 异常处理：如果是普通字符串格式（兼容旧数据）
            this.imgS = imgUrl ? [imgUrl] : [];
          }
          this.imgSAll = this.imgS.map((item,index)=>({
            name:index+1,
            url:item,
          }))
          return res;
        }else {
          this.$message.error(res.msg)
        }
      })
    },

    // 收藏
    collect() {
      const user = JSON.parse(localStorage.getItem('login-user'))
      //判断是否登录
      if (user == null){
        this.$message.warning('请先登录！')
        return;
      }
      //判断是否是租客账号
      if(user.role !== '租客'){
        this.$message.warning('只有租客账号才能收藏房屋')
        return;
      }
        //判断是否已经收藏
        axios({
          url: "http://localhost:8090/collect/select",
          method: 'post',
          data: {
            houseId: this.house.id
          }
        }).then(res => {
          //若还未收藏
          if (res.code === '400') {
            axios({
              url: "http://localhost:8090/collect/create",
              method: 'post',
              data: {
                userId: user.id,
                houseId: this.house.id
              }
            }).then(res => {
              if (res.code === '200'){
                this.star = true;
                this.$message.success("收藏成功！")
              }
            })
          } else if (res.code === '200'){
            axios({
              url: "http://localhost:8090/collect/delete",
              method: 'delete',
              data: {
                userId: user.id,
                houseId: this.house.id
              }
            }).then(res => {
              if (res.code === '200'){
                this.star = false;
                this.$message.success("取消收藏成功！")
              }
            })
          }
        })
    },

    //是否收藏
    isStar() {
        axios({
          url: "http://localhost:8090/collect/select",
          method: 'post',
          data: {
            houseId: this.$route.params.id
          }
        }).then(res => {
          if (res.code === '200'){
            this.star = true
          }else{
            this.star = false
          }
        })
    },

    //提交留言
    evaluateSub(){
      if(user === null){
        this.$message.warning('请先登录！')
        return;
      }
      if(user.role==='管理员'){
        this.$message.warning('管理员不能留言！')
        return;
      }
      if (this.evaluate.content === ''){
        this.$message.warning('请输入留言内容！')
        return;
      }
      axios({
        url:"/evaluate/add",
        method: 'post',
        data: {
          houseId:this.info.house.id,
          content:this.evaluate.content,
          value:this.evaluate.value
        }
      }).then(res=>{
        if (res.code === '200'){
          this.$message.success('留言成功')
          this.evaluate.value = 0
          this.evaluateGet()
        }else {
          this.$message.error(res.msg)
        }
      })
    },

    // 立即预定
    timeBtn() {
      //判断是否登录
      if (user == null) {
        this.$message.warning('请先登录！')
        return;
      }
      //判断是否是租客账号
      else if (user.role !== '租客') {
        this.$message.warning('只有租客账号才能预定房屋')
        return;
      } else {
        if (this.dateRange[0] == null || this.dateRange[1] == null) {
          this.$message.warning('请选择预约日期！')
          return;
        }
        //判断是否已经预定
        axios({
          url: "http://localhost:8090/order/create",
          method: 'post',
          data: {
            renterId: user.id,
            landlordId: this.house.ownerId,
            houseId: this.house.id,
            startDate: this.dateRange[0],
            endDate: this.dateRange[1],
          }
        }).then(res => {
          // 判断是否预定成功
          if (res.code === '200') {
            this.$message.success("预定成功!即将跳转到合同页面,请稍后...")
            //前往合同签订界面
            setTimeout(() => {
              this.$router.push({path: '/index/agreement', query: {id: res.data}})
            }, 2000)
          }
        })
      }
    },

    reserve(id){
      //console.log("当前预约日期是：",this.date)
      if (user === null){
        this.$message.warning('请先登录！')
        return;
      }
      checkUserInfoComplete().then(res => {
        if (res === false) {
          this.$message.warning('请先完善个人信息!')
          setTimeout(() => {
            this.$router.push('/index/admin/info')
          }, 2000)
        } else if (this.date === '') {
          this.$message.warning('请选择预约时间！')
        } else {
          axios({
            url:'/reservation/new',
            method: 'post',
            data:{
              houseId:id,
              datetime:this.date
            }
          }).then(res=>{
            if (res.code === '200'){
              this.$message.success("预约成功！请等待预约结果")
            }else {
              this.$message.error(res.msg)
            }
          })
        }
      })
    },

    /*reserve1(id){
      checkUserInfoComplete().then(res => {
        if (res === false){
          this.$message.warning('请先完善个人信息!')
          setTimeout(() => {
            this.$router.push('/index/admin/info')
          },2000)
        }else if (this.date[0] == null|| this.date[1] == null){
          this.$message.warning('请选择预约时间！')
        }else {
          axios({
            url:'/reservation/new',
            method: 'post',
            data:{
              houseId:id,
              startDate:this.date[0],
              endDate:this.date[1],
            }
          }).then(res=>{
            if (res.code === '200'){
              this.$message.success("预约成功！请等待预约结果")
            }
          })
        }
      });
    },*/

    evaluateGet(){
      const  id = this.$route.params.id
      //console.log("当前房屋的id是：",id)
      axios({
        url:"/evaluate/get",
        method: 'get',
        params: {
          houseId:id,
        }
      }).then(res=>{
        if (res.code === '200'){
          //console.log("返回的评价是：",res.data)
          this.list = res.data
        }
      })
    },

    // 修改handleLike方法
    handleLike(id) {
      if (!user) {
        this.$message.warning('请先登录！');
        return;
      }
      this.isLiked = !this.isLiked;

      if (this.isLiked){
        axios({
          url:'/evaluate/update',
          method:'put',
          data:{
            id:id
          }
        }).then(res=>{
          if (res.code === '200'){
            this.evaluateGet()
          }else {
            this.$message.error(res.msg)
          }
        })
      }else {
        axios({
          url:'/evaluate/update1',
          method:'put',
          data:{
            id:id
          }
        }).then(res=>{
          if (res.code === '200'){
            this.evaluateGet()
          }else {
            this.$message.error(res.msg)
          }
        })
      }
      //console.log("当前点赞次数为：",this.count)
    },


    // 地图
    init() {
      let load = AMapLoader.load({
        key: "d3a325e82b58b05fbb8f6f76c9c96437",             // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.Scale', 'AMap.Autocomplete', 'AMap.PlaceSearch',"AMap.Geocoder"],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        this.map = new AMap.Map("map", {  //设置地图容器id
          viewMode: "2D",    //是否为3D地图模式
          zoom: 16,           //初始化地图级别
          center: [this.lng, this.lat], //初始化地图中心点位置
          resizeEnable: true
        })
        this.map.addControl(new AMap.Scale())
        // 初始化标记
        this.addMarker(this.lng, this.lat)
        // 初始化自动完成和地点搜索
        this.initAutoComplete(AMap);
      }).catch(e => {
        //console.log(e);
      })
      // console.log(load)
    },

    addMarker(lng, lat) {
      if (this.marker) {
        this.marker.setMap(null)
      }
      this.marker = new AMap.Marker({
        position: [lng, lat],
        map: this.map,
        icon: new AMap.Icon({
          image: require('@/assets/flag/icon4.svg'),
          size: new AMap.Size(28, 38),
          imageSize: new AMap.Size(28, 38),
          // 添加 imageOffset 属性
        }),
        animation: "AMAP_ANIMATION_DROP",
      });
      this.map.setCenter([lng, lat]); // 设置地图中心
    },

    //实现根据地点名获取经纬度坐标
    getLocationCoordinates() {

        /*const key = 'bb1281b3d832b62aac8db5e02e944529'
        let mapLocation = "成都市武侯区江春路";
        //console.log(mapLocation)
        axios.get(`https://restapi.amap.com/v3/geocode/geo?key=${key}&address=${mapLocation}`)
        .then(res => {
          if (res.code === '200') {
            console.log("返回的数据为:",res)
              const location = res.geocodes[0].location.split(',')
              this.lng = location[0]
              this.lat = location[1]
            } else {
              this.$message.warning('地址解析失败！')
            }
        })*/
      /*const key = 'bb1281b3d832b62aac8db5e02e944529';
      const mapLocation = "成都市武侯区江春路";

      axios({
        url:`https://restapi.amap.com/v3/geocode/geo?key=${key}&address=${mapLocation}`,
        method: 'get',
      }).then(res=>{
        if (res.code === '200') {
          //console.log("返回的数据为:",res)
          const location = res.data.location.split(',');
          console.log("经纬度为:",location)
          this.lng = parseFloat(location[0]);
          this.lat = parseFloat(location[1]);
          this.map.setCenter([this.lng, this.lat]);
          this.addMarker(this.lng, this.lat);
          this.$message.success('定位成功');
        } else {
          this.$message.warning(res.msg);
        }
      })*/
      /*axios({
        url: `https://restapi.amap.com/v3/geocode/geo?key=${key}&address=${mapLocation}`,
        method: 'get',
        responseType: 'jsonp' // 使用 jsonp 解决跨域
      }).then(res => {
            if (res.code === '200') {
              //console.log("返回的数据为:",res)
              const location = res.data.location.split(',');
              console.log("经纬度为:",location)
              this.lng = parseFloat(location[0]);
              this.lat = parseFloat(location[1]);
              this.map.setCenter([this.lng, this.lat]);
              this.addMarker(this.lng, this.lat);
              this.$message.success('定位成功');
            } else {
              this.$message.warning(res.msg);
            }
          })*/
    },

  },
    computed: {
      //房屋状态
      houseStatus() {
        switch (this.house.status) {
          case 0:
            return '未租出';
          case 1:
            return '已租出';
          case -1:
            return '已下架';
          case -2:
            return '待审核';
          case -3:
            return '审核不通过';
          default:
            return '未知状态';
        }
      },
      formatDate(){
        let date = new Date(this.currentDate.getTime() + 5000); // 加 5000 毫秒，即 5 秒
        let hours = date.getHours().toString().padStart(2, '0');
        let minutes = date.getMinutes().toString().padStart(2, '0');
        let seconds = date.getSeconds().toString().padStart(2, '0');
        return `${hours}:${minutes}:${seconds}`;
      },

    }
}
</script>

<style scoped>



.detail {
  min-height: 821px;
  background-color: #f8f9fe;
}

.title {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  font-weight: 600;
}

.title .price {
  font-size: 40px;
  color: #4b5eff;
}

.info h1 {
  font-size: 50px;
  color: #293672;
  padding-top: 20px;
  padding-bottom: 25px;
}

.info p {
  display: flex;
  justify-content: center;
  color: #777;
}

.info i {
  padding-right: 10px;
}


img {
  width: 100%;
  height: 100%;
}


.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.main {
  padding: 0 310px;
  display: flex;
  justify-content: space-between;
}

.main .left,
.main .right {
  margin-top: 20px;
}

.main .left {
  width: 850px;
}

.descriptions {
  background-color: white;
  height: 250px;
  padding: 20px;
  line-height: 40px;
}

.desc {
  min-height: 100px;
  background-color: white;
  margin-top: 30px;
  padding: 15px;
}

.desc h2 {
  font-weight: 600;
  padding-bottom: 20px;
}

.desc span {
  color: #777;
  font-size: 15px;
  line-height: 30px;
}

/*.container {
  height: 550px;
  margin-top: 30px;
  font-weight: 600;
  background-color: white;
}

.container h2 {
  padding: 15px;
}*/

#map{
  margin-top: 10px;
  min-height: 400px;
  margin-bottom: 10px;
}

.gallery {
  height: 850px;
  margin-top: 30px;
  font-weight: 600;
  background-color: white;
  padding: 15px;
}

.gallery .btnS{
  margin: 5px 10px 5px 300px;
}
.gallery .imgs {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}

.imgs> :nth-child(4),
.imgs> :nth-child(5),
.imgs> :nth-child(6) {
  margin-top: 20px;
  margin-bottom: 20px;
}

.main .right {
  width: 400px;
}

.right .collect {
  background-color: white;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: red;
  margin-bottom: 30px;
}

.el-icon-star-on {
  width: 200px;
  height: 50px;
  font-size: 25px;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
  line-height: 50px;
  /*border: 1px solid rgb(242, 94, 0);*/
  border: 1px solid #e91e65;
  color: rgb(242, 94, 0);
  /*background-color: rgb(255, 218, 218);*/
}
.el-icon-star-off {
  width: 200px;
  height: 50px;
  font-size: 25px;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
  line-height: 50px;
  /*border: 1px solid rgb(242, 94, 0);*/
  border: 1px solid #e91e65;
  color: rgb(242, 94, 0);
 /* background-color: rgb(255, 218, 218);*/
}

.star {
  border: 1px solid rgb(242, 94, 0);
  color: #fff;
  background-color: rgb(242, 94, 0);
}

.date {
  background-color: white;
  height: 450px;
  /*margin-bottom: 20px;*/
}

.date .price {
  background-color: #4b5fff;
  height: 80px;
  display: flex;
  align-items: center;
  padding-left: 20px;
  font-size: 25px;
  color: white;
  font-weight: 600;
}

.date .pick {
  padding: 11px 20px;
}

.date .pick p {
  color: #777;
  font-size: 15px;
  padding-bottom: 10px;
  text-align: center;
}

.btn2 {
  width: 350px;
  height: 50px;
  margin-top: 25px;
  background-color: #20ab6c;
}
.btn3 {
  width: 350px;
  height: 50px;
  margin-top: 50px;
  background-color: #c21919;
}

.contact {
  background-color: white;
}

.contact h2 {
  padding: 5px;
  background-color: #4b5fff;
  color: white;
  font-weight: 600;
  height: 50px;
}

.msg {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  line-height: 20px;
}

.msg .imgtx {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.msg .imgewm {
  width: 300px;
  height: 300px;
  margin-top: 10px;
}

.msg .wz {
  font-size: 15px;
  color: #777;
  padding-top: 10px;
}



.comment-list {
  margin-top: 20px;
}

.comment-item {
  padding: 10px;
  border-bottom: 1px solid #ebeef5;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.user-name {
  font-weight: bold;
}

.comment-content {
  margin-bottom: 10px;
  margin-left: 10px;
}

.comment-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

.action-buttons {
  display: flex;
  align-items: center;
  gap: 15px; /* 控制按钮间距 */
}

.like-container {
  margin-left: auto; /* 将点赞推到最右侧 */
}

.no-comment-tip {
  padding: 20px;
  color: #999;
  text-align: center;
  border: 1px dashed #eee;
  margin-top: 20px;
}

.el-icon-thumb {
  color: #999; /* 初始灰色 */
}

.liked .el-icon-thumb {
  color: #ff0000; /* 点赞后红色 */
}

.liked {
  color: #ff0000 !important;
}



</style>